<template>
    <div class="ysjcxx">
        <!-- 搜索区域 -->
        <el-form :model="queryParams" label-width="68px">
            <div style="display: flex;">
                <el-form-item label="姓名">
                    <el-input v-model="queryParams.name" size="small" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item label="年级" prop="year">
         <el-select v-model="queryParams2.year" clearable placeholder="请选择年级"   @change="getClazzList">
             <el-option
             v-for="item in yearList"
             :key="item.value"
             :label="item.label"
             :value="item.value"
             size="small">
           </el-option>
         </el-select>
       </el-form-item>
                <el-form-item label="班级" prop="classId">
         <el-select v-model="queryParams2.classId" clearable placeholder="请选择班级" filterable>
           <el-option
             v-for="item in clazzList"
             :key="item.id"
             :label="item.title"
             :value="item.id"
             size="small">
           </el-option>
         </el-select>
       </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker v-model="dateRange" type="daterange"  value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"  :editable="false"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </div>
            <span style="float: right; margin: 3px 10px;">
                <el-button type="primary" @click="search" size="mini">查询</el-button>
                <el-button style="margin-left: 8px" @click="reset" size="mini">重置</el-button>
            </span>
        </el-form>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
        <el-table ref="multipleTable" :data="columns" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="passTime" label="时间" align="center">
            </el-table-column>
            <el-table-column prop="name" label="人员姓名" align="center">
            </el-table-column>
            <el-table-column prop="recognitionPhoto" label="识别图片" align="center">
                <template slot-scope="scope">
                    <div>
                        <img :src="scope.row.recognitionPhoto" alt="" style="width: 50px; height: 50px;">
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="inOutMode" label="出入口模式" align="center">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.inOutMode === '0'">未知</span>
                        <span v-else-if="scope.row.inOutMode === '1'">入口</span>
                        <span v-else>出口</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="personType" label="人员类型" align="center">
                <template slot-scope="scope">
                    <div>
                        <span v-if="scope.row.personType === '1'">教师</span>
                        <span v-else="scope.row.personType === '2'">学生</span>
                    </div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope, 'edit')" type="text" class="el-icon-edit"
                        v-if="scope.row.auditStatus !== '1'">编辑 </el-button>
                    <el-button size="mini" @click="handleDelete(scope.row)" type="text" icon="el-icon-delete"
                        v-if="scope.row.auditStatus !== '1'">删除 </el-button>
                    <el-button size="mini" @click="view(scope.row)" type="text" icon="el-icon-document">查看 </el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getInOutRecordList" />
    </div>
</template>

<script>
import { getInOutRecordList, faceRecordExport } from '@/api/teach/ysjcxx'
import { selectClazz } from "@/api/base/clazz";
export default {
    data() {
        return {
            columns: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            form: {},
            yearList:[],
            clazzList: [],
            queryParams2: {
                pageNum: 1,
                pageSize: 10,
                taskId: null,
                specId: null,
                courseId: null,
                classId: null,
                teacherId: null,
                roomId: null,
                week: null,
                sectionId: null
            },
            total: 10,
            value1: '',
            dateRange: [],
        }
    },
    created() {
        this.getConfigKey("sys.time.start").then(response => {
      var st = parseInt(response.msg);
      var dt = new Date();
      while(st<=dt.getFullYear()+1){
        this.yearList.push({value: st,label: st});
        st ++;
      }
    });
        this.search()
    },
    methods: {
        getClazzList() {
      this.loading = true;
      var p = {status:'1'};
      if(this.form.year) p.year = this.form.year;
      if(this.form.specId) p.specId = this.form.specId;
      selectClazz(p).then(response => {
        this.clazzList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
        async getInOutRecordList() {
            const { rows, code, msg, total } = await getInOutRecordList(this.queryParams)
            if (code === 200) {
                this.columns = rows
                this.columns.map(item => {
                    return item.recognitionPhoto = 'data:image/jpeg;base64,' + item.recognitionPhoto
                })
                this.total = total
            } else {
                this.$message.error(msg)
            }
        },
        search() {
            if (this.dateRange) {
                const obj = {
                    ...this.queryParams,
                    'params[beginTime]': this.dateRange[0],
                    'params[endTime]': this.dateRange[1],
                }
                this.queryParams = obj
            }
            this.getInOutRecordList()
        },
        reset() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
            }
            this.dateRange = []
            this.search()
        },
        changeTime(e) {

            this.queryParams.passTime = e
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams
            this.$confirm('是否确认导出所有人员出入信息项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return faceRecordExport(queryParams);
            }).then(response => {
                this.download(response.msg);
            })
        }
    },



}
</script>

<style lang="scss" scoped>
.ysjcxx {
    padding: 30px;
}

.el-form {
    display: flex;
}
</style>